<template>
  <div :id="id" style="width: 100%; height: 100%" />
</template>
<script setup lang="ts">
import Player, { IPlayerOptions } from "xgplayer";
import Mp4Player from "xgplayer-mp4";
import { defineProps, onMounted } from "vue";
import "xgplayer/dist/index.min.css";

defineOptions({
  name: "RePlayer"
});

const props = withDefaults(defineProps<IPlayerOptions>(), {
  id: "player",
  // 默认静音
  volume: 0.4,
  width: "",
  height: "",
  fitVideoSize: "fixed",
  autoplay: false,
  screenShot: true,
  videoAttributes: () => {
    return {
      crossOrigin: "anonymous"
    };
  },
  url: "",
  poster: "",
  fluid: false,
  //传入倍速可选数组
  playbackRate: () => [0.5, 0.75, 1, 1.5, 2],
  loop: false,
  videoInit: true, // 初始化显示视频首帧
  download: false,
  lang: "zh-cn",
  controls: true,
  closeVideoClick: false,
  closeVideoDblclick: false,
  closeVideoTouch: false,
  keyShortcut: false,
  pluginRule: () => {
    return false;
  },
  errorTips: `请<span>刷新</span>试试`,
  ignores: () => []
});

onMounted(() => {
  new Player({
    id: props.id,
    url: props.url,
    lang: props.lang,
    poster: props.poster,
    // 默认静音
    volume: props.volume,
    width: props.width,
    height: props.height,
    fitVideoSize: props.fitVideoSize,
    autoplay: props.autoplay,
    screenShot: props.screenShot,
    videoAttributes: props.videoAttributes,
    fluid: props.fluid,
    //传入倍速可选数组
    playbackRate: [0.5, 0.75, 1, 1.5, 2],
    loop: props.loop,
    videoInit: props.videoInit,
    download: props.download,
    controls: props.controls,
    pluginRule: props.pluginRule,
    errorTips: props.errorTips,
    closeVideoClick: props.closeVideoClick,
    closeVideoDblclick: props.closeVideoDblclick,
    closeVideoTouch: props.closeVideoTouch,
    keyShortcut: props.keyShortcut,
    ignores: props.ignores,
    plugins: [Mp4Player],
    mp4plugin: {
      maxBufferLength: 50,
      minBufferLength: 10
    }
  });
});
</script>
